<template>
  <Card>
    <template #header>
      <a-tooltip>
        <template #title>prompt text</template>
        <span class="mr_5">搜索指数概览</span>
        <QuestionCircleOutlined />
      </a-tooltip>
    </template>
    <div class="table">
      <div class="th">
        <p>
          <span>关键词</span>
          <span>整体日均值</span>
          <span>移动日均值</span>
          <span>整体同比</span>
          <span>整体环比</span>
          <span>移动同比</span>
          <span>移动环比</span>
        </p>
      </div>
      <div class="tb">
        <p>
          <span v-title>淘宝</span>
          <span v-title>136,480 </span>
          <span v-title>45,209</span>
          <span v-title>-11%</span>
          <span v-title>-22%</span>
          <span v-title>15%</span>
          <span v-title>15%</span>
        </p>
      </div>
    </div>
  </Card>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import Card from "@/components/Card";
</script>

<style lang="less" scoped>
.table {
  height: 28vh;
  display: flex;
  flex-direction: column;

  .th > p,
  .tb > p {
    padding: 15px 20px;
    font-size: 14px;

    display: flex;
    align-content: center;
    span {
      width: 50%;
      padding: 0 10px;
      display: inline-block;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }

  .th {
    color: #cbd2d5;
    font-size: 16px;
  }
  .tb {
    flex: 1;
    overflow-y: auto;
  }
  .tb > p {
    background: #131313;
    border-radius: 5px;
    margin-bottom: 10px;
  }
}
</style>
